import * as React from 'react';
// import { Link } from 'react-router-dom';
import { List, Map } from 'immutable';
import { compose, Dispatch } from 'redux';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { IRouteComponentBaseProps, injectReducer, injectSaga } from '../../../../common';
import DocumentTitle from 'react-document-title';
import { Spin, Button } from 'antd';
import { beginLoadWorker, loadWorker } from './actions';
import {
    selectWorkers, selectWorkerLoading
} from './selectors';
import reducer from './reducers';
import saga from './sagas';

interface IWorkerListProps extends IRouteComponentBaseProps {
    beginLoadWorker: () => void;
    loadWorker: () => void;
    workerLoading: boolean;
    workers: List<Map<string, any>> | null;
}

export const mapDispatchToProps = (dispatch: Dispatch<{}>) => {
    return {
        beginLoadWorker: () => dispatch(beginLoadWorker()),
        loadWorker: () => dispatch(loadWorker())
    };
};

export const mapStateToProps = createStructuredSelector({
    workerLoading: selectWorkerLoading(),
    workers: selectWorkers()
});

class WorkerList extends React.PureComponent<IWorkerListProps, any> {
    public static displayName = 'WorkerList';

    public constructor(props: IWorkerListProps) {
        super(props);
    }

    public componentWillUnmount() {
        // this.props.syncRemovingEntityId(0);
    }

    public componentDidMount() {
        this.props.beginLoadWorker();
    }

    public render() {
        const { workerLoading, workers } = this.props;

        return (
            <DocumentTitle title="Worker 列表 demo">
                <div>
                    <div>
                        <Spin spinning={workerLoading} />
                        <Button onClick={this.props.loadWorker} >来~手动刷新一下</Button>
                    </div>
                    <div>
                        {JSON.stringify(workers)}
                    </div>
                </div>
            </DocumentTitle>
        );
    }
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'worker_list', reducer });
const withSaga = injectSaga({ key: 'worker_list', saga });

export default compose(
    withReducer,
    withSaga,
    withConnect
)(WorkerList);
